<template>
  <div>
    <div v-show="!monacoBox">
      <div ref="wang-editor" class="wang-editor" />
    </div>

    <!-- 本地图片上传的文件选择器 -->
    <input
      type="file"
      ref="fileInput"
      @change="handleFileChange"
      style="display: none"
      accept="image/*"
    />

    <!-- 本地视频上传的文件选择器 -->
    <!-- <input
      type="file"
      ref="videoInput"
      @change="handleVideoChange"
      style="display: none"
      accept="video/*"
    /> -->
    <!-- <Upload
      v-if="isupload"
      :config="{ total: 9 }"
      :isupload="isupload"
      @returnImgs="returnImgsFunc"
      >上传图片</Upload
    > -->
  </div>
</template>

<script>
import E from "wangeditor";
import Compressor from "compressorjs";
// import Upload from "@/components/file/Upload.vue";
export default {
  name: "Index",
  components: {
    // Upload
  },
  props: {
    content: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      monacoBox: false,
      value: "",
      modalPic: false,
      isChoice: "多选",
      picTit: "danFrom",
      img: "",
      modalVideo: false,
      editor: null,
      uploadSize: 2,
      video: "",
      isupload: false,
    };
  },

  watch: {
    content(val) {
      if (this.editor && this.editor.txt.html() !== val) {
        this.editor.txt.html(val);
      }
    },
  },

  mounted() {
    this.createEditor();
  },

  methods: {
    changeValue(value) {
      this.newHtml = value;
      console.log(this.newHtml);
      this.$emit("editorContent", value);
      this.$emit("input", value);
    },

    // 本地图片选择
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith("image/")) {
        new Compressor(file, {
          quality: 0.4, // 设置压缩质量，值越低压缩越强
          maxWidth: 800, // 设置图片最大宽度
          maxHeight: 800, // 设置图片最大高度
          success: (compressedFile) => {
            const reader = new FileReader();
            reader.onload = () => {
              const imgUrl = reader.result;
              this.insertImage(imgUrl); // 插入压缩后的图片
            };
            reader.readAsDataURL(compressedFile); // 读取压缩后的文件
          },
          error: (err) => {
            console.error("压缩失败：", err);
          },
        });
      }
    },

    // 插入本地图片到编辑器
    insertImage(imgUrl) {
      this.editor.cmd.do(
        "insertHTML",
        `<img src="${imgUrl}" style="max-width:100%;"/>`
      );
    },

    // 本地视频选择
    handleVideoChange(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith("video/")) {
        const reader = new FileReader();
        reader.onload = () => {
          const videoUrl = reader.result;
          this.insertVideo(videoUrl);
        };
        reader.readAsDataURL(file);
      }
    },

    // 插入视频到编辑器
    insertVideo(videoUrl) {
      const videoHTML = `<video src="${videoUrl}" controls style="max-width:100%; min-height:500rpx;"></video><p><br></p>`;
      this.editor.cmd.do("insertHTML", videoHTML);
    },

    createEditor() {
      let _this = this;
      this.editor = new E(this.$refs["wang-editor"]);

      this.editor.config.menus = [
        "alertHtml",
        "head",
        "bold",
        "fontSize",
        "fontName",
        "italic",
        "underline",
        "strikeThrough",
        "indent",
        "lineHeight",
        "foreColor",
        "backColor",
        "link",
        "list",
        "justify",
        "quote",
        "emoticon",
        "image", // 取消默认的图片上传方式
        // "video", // 添加视频上传
        "code",
        "splitLine",
      ];

      // 覆盖上传图片和视频的按钮功能
      this.editor.config.uploadImgFromMedia = function () {
        _this.$refs.fileInput.click(); // 触发文件选择框上传图片
      };

      this.editor.config.uploadVideoFromMedia = function () {
        _this.$refs.videoInput.click(); // 触发文件选择框上传视频
      };

      this.editor.config.uploadImgShowBase64 = false;
      this.editor.config.zIndex = 0;

      this.editor.config.onchange = (newHtml) => {
        this.newHtml = newHtml;
        this.$emit("contens", newHtml);
      };

      this.editor.create();
      this.editor.txt.html(this.content);
    },
  },
};
</script>

<style scoped>
.bottom {
  margin-bottom: 10px;
  cursor: pointer;
}

.monaco-box ::v-deep .el-textarea__inner {
  height: 600px;
}

::v-deep .w-e-toolbar {
  z-index: 2 !important;
}
</style>
